<template>
	<view class="content">
		<view class="input bg">
			<input type="text" placeholder="请填写活动标题" placeholder-class="p-class" v-model="FormData.title" />
		</view>
		<view class="input bg" style="margin-top: 15px;">
			<input type="text" placeholder="请填写手机号" placeholder-class="p-class" v-model="FormData.mobile" />
		</view>

		<view class="input-item" style="margin-top: 15px;">
			<input class="input-dom" type="number" maxlength="4" v-model="FormData.coedStr" placeholder="请输入验证码" />
			<view class="text" :class="[sendIng ? 'sendIng' : '']" @click="sendSmFn" style="">
				{{ calcTextStr }}
			</view>
		</view>

		<view class="textarea bg">
			<textarea style="height: 260rpx;" placeholder="请描述活动详情" placeholder-class="p-class"
				v-model="FormData.detail"></textarea>
		</view>
		<view class="title">活动图片</view>
		<view class="voice tn-flex">
			<block v-for="(item,index) in FormData.images" :key="index">
				<view class="uimg">
					<image :src="item" class="selectedImg" mode=""></image>
					<image src="/static/my/imgClose.png" class="imgClose" @click="delImg(index)" mode=""></image>
				</view>
			</block>
			<image src="@/static/uploading.png" v-if="FormData.images.length < 9" @click="uploadImg" class="uimg"
				mode=""></image>
		</view>
		<view class="select" @click="timeShow = true">
			<view class="select-left">
				<image src="/static/index/time.png" class="img1" mode=""></image>
				<text>活动时间</text>
			</view>
			<view class="select-right">
				<text>{{FormData.times}}</text>
				<image src="/static/index/right1.png" mode=""></image>
			</view>
		</view>
		<view v-if="!isAuditVersion" class="select" @click="chooseLocation">
			<view class="select-left">
				<image src="/static/index/city.png" class="img2" mode=""></image>
				<text>活动地点</text>
			</view>
			<view class="select-right">
				<text>{{FormData.address}}</text>
				<image src="/static/index/right1.png" mode=""></image>
			</view>
		</view>

		<view style="color: red;">发布活动需要收费，具体金额提交活动后，商务会联系沟通。</view>

		<view class="btn" @click="submit">确定发布</view>
		<!-- 选择时间 -->
		<tn-picker mode="time" v-model="timeShow" :params="params" @confirm="timeConfirm" :startYear="nowYear"
			:startMonth="nowMonth" :startDay="nowDay"></tn-picker>

		<permissionGuide ref="refPermissionGuide" />
	</view>
</template>
<script>
	import permissionGuide from "@/components/permissionGuide/index.vue"
	import {
		imgUploading
	} from "@/common/common.js"
	let timer;
	export default {
		components: {
			permissionGuide
		},
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				timeShow: false,
				FormData: {
					title: '',
					detail: '',
					times: '请选择时间',
					// lat: '',
					// lng: '',
					lat: '26.676934',
					lng: '106.625882',
					address: '请选择地点',
					images: [],
					mobile: '', //手机号
					coedStr: '', //验证码
				},
				// 是否在发送中的状态
				sendIng: false,
				// 用户发送验证码的次数
				sendSmCont: 0,
				// 间隔一分钟 后可以再次发送
				intervalTime: 60,
				// 显示在页面上的倒计时
				showIntervalStr: 0,
				nowYear: '',
				nowMonth: '',
				nowDay: '',
				isAuditVersion: getApp().globalData.isAuditVersion
			}
		},
		onLoad() {

			// 获取当前时间
			var now = new Date();
			now.setDate(now.getDate() + 1); // 增加一天
			// 获取年份
			this.nowYear = now.getFullYear();
			// 获取月份，需要注意月份是从0开始计算的，所以需要+1
			this.nowMonth = now.getMonth() + 1;
			// 获取日期
			this.nowDay = now.getDate();
		},
		onUnload() {
			clearInterval(timer);
		},
		methods: {
			async submit() {


				if (this.FormData.title == '') {
					uni.showToast({
						title: "竟然都不写活动标题?",
						icon: 'none'
					})
					return
				}

				if (this.FormData.mobile.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '手机号码不能为空'
					});
					return false;
				}
				if (!this.regTel(this.FormData.mobile)) {
					uni.showToast({
						title: "手机号码格式错误",
						icon: 'none'
					})
					return
				}
				if (this.FormData.coedStr.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '验证码不能为空'
					});
					return false;
				}

				if (this.FormData.detail == '') {
					uni.showToast({
						title: "活动详情也是必须写滴",
						icon: 'none'
					})
					return
				}
				if (this.FormData.images.length == 0) {
					uni.showToast({
						title: "一张图片都不传啊!!",
						icon: 'none'
					})
					return
				}
				if (this.FormData.times == '请选择时间') {
					uni.showToast({
						title: "给我一个时间吧",
						icon: 'none'
					})
					return
				}
				if (!getApp().globalData.isAuditVersion) {
					if (this.FormData.lat == '') {
						uni.showToast({
							title: "地点 地点 地点",
							icon: 'none'
						})
						return
					}
				}


				const _checkRealnameVerify = await getApp().checkRealnameVerify()
				if (!_checkRealnameVerify) return


				// let imgs = JSON.parse(JSON.stringify(this.FormData.images))

				this.$request({
					loading: 1,
					method: 'post',
					url: '/api/user/addActive',
					data: {
						title: this.FormData.title,
						detail: this.FormData.detail,
						images: this.FormData.images.toString(),
						address: this.FormData.address,
						lat: this.FormData.lat,
						lng: this.FormData.lng,
						times: this.FormData.times,
						mobile: this.FormData.mobile,
						code: this.FormData.coedStr
					}
				}).then(res => {
					let {
						code,
						msg
					} = res.data
					console.log('=then=', res)
					if (code == 200) {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 800)
					}
				}).catch(err => {
					uni.showToast({
						title: ''
					})
					console.log('=错误=', err)
				})
			},
			// 开启倒计时
			startIntervalFn() {
				let that = this;
				that.showIntervalStr = that.intervalTime;
				clearInterval(timer);
				timer = setInterval(() => {
					that.showIntervalStr--;
					if (that.showIntervalStr <= 0) {
						that.sendIng = false;
					}
				}, 1000);
			},
			// 发送验证码
			async sendSmFn() {
				let that = this;
				if (that.sendIng) {
					return false;
				}
				if (that.FormData.mobile.length <= 0) {
					uni.showToast({
						icon: 'none',
						title: '手机号码不能为空'
					});
					return false;
				}
				if (!that.regTel(that.FormData.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '手机号码格式有误'
					});
					return false;
				}
				that.sendSmCont++;
				that.sendIng = true;

				that.startIntervalFn();
				let result = await that.$request({
					method: 'post',
					url: `/api/login/sendsms`,
					data: {
						mobile: that.FormData.mobile,
						event: 'addActive'
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {

						if (result.data.data.sms_is == 0) {

							that.FormData.coedStr = result.data.data.code


							uni.showModal({
								title: '提示',
								showCancel: false,
								content: '未开启短信发送,系统自动填写验证码,直接登录即可',
								success: function(res) {
									if (res.confirm) {

									} else if (res.cancel) {

									}
								}
							});



						} else {
							uni.showToast({
								icon: 'none',
								title: '发送成功，请查收'
							});
						}


					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
						that.sendIng = false;
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
					that.sendIng = false;
				}
			},
			uploadImg() {
				uni.showActionSheet({
					itemList: ["相册照片", "拍照"],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.handleChooseImage("album");
						}
						if (res.tapIndex == 1) {
							this.handleChooseImage("camera");
						}
					}
				})
			},

			handleChooseImage(sourceType) {
				this.$uniApiBaseChooseImage({
					count: 9 - this.FormData.images.length,
					sourceType: [sourceType],
				}).then((res) => {
					this.recursionUImg(res.tempFilePaths, 0)
				}).catch(error => {
					if (error.errMsg == "show-permision-guide") {
						this.$refs.refPermissionGuide.open({
							perName: sourceType
						})
					}
				})
			},
			// 递归上传图片
			recursionUImg(tempFilePaths, index) {
				uni.showLoading({
					title: '上传中'
				});
				if (index == tempFilePaths.length || this.FormData.images.length == 9) {
					console.log("所有图片上传完成");
					uni.hideLoading();
					return;
				}
				imgUploading(tempFilePaths[index]).then(res => {
					console.log("第" + (index + 1) + "张图片上传成功");
					this.FormData.images.push(res.data.file)
					this.recursionUImg(tempFilePaths, index + 1);
				}).catch(err => {
					console.log("第" + (index + 1) + "张图片上传失败");
					uni.showModal({
						title: '提示',
						content: '上传失败了，可能图片太大导致，请重试'
					});
				})

			},

			// 时间
			timeConfirm(e) {
				this.FormData.times = `${e.year}-${e.month}-${e.day}`
			},
			// 位置
			chooseLocation() {
				getApp().handleSysGetLocation().then(res => {
					this.FormData.address = res.address.city
					this.FormData.lat = res.latitude
					this.FormData.lng = res.longitude
				})
			},
			// 删除图片
			delImg(index) {
				this.FormData.images.splice(index, 1)
			},
		},
		// ↑↑↑↑↑ methods 结束
		computed: {
			// 发送验证码 按钮的文字
			calcTextStr() {
				let that = this;
				// 第一次发送验证码 - 获取验证码
				// 第多次发送验证码 - 重新获取验证码
				let str = ``;
				if (that.sendSmCont <= 0) {
					if (that.sendIng) {
						str = `重新获取(${that.showIntervalStr})`;
					} else {
						str = `获取验证码`;
					}
				} else {
					if (that.sendIng) {
						str = `重新获取(${that.showIntervalStr})`;
					} else {
						str = `获取验证码`;
					}
				}
				return str;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		padding: 24rpx 30rpx;
		background: #efefef;
		height: calc(100vh - 50px);

		input,
		textarea {
			color: #333333;
		}

		.bg {
			background: #ffffff;
			border-radius: 20rpx;
		}

		.input {
			height: 90rpx;
			display: flex;
			align-items: center;
			padding-left: 24rpx;
		}

		.textarea {
			padding: 24rpx;
			margin-top: 32rpx;
			height: 300rpx;
		}

		.title {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			margin-top: 32rpx;
		}

		.voice {
			margin-top: 24rpx;
			margin-bottom: 30rpx;
			flex-wrap: wrap;

			.uimg:nth-child(4n) {
				margin-right: 0 !important;
			}


			.uimg {
				width: 160rpx;
				height: 160rpx;
				position: relative;
				margin-right: 17rpx;
				margin-bottom: 17rpx;

				.selectedImg {
					width: 100%;
					height: 100%;
				}

				.imgClose {
					width: 49rpx;
					height: 46rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
			}



		}

		.select {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;

			.select-left {
				display: flex;
				align-items: center;

				.img1 {
					width: 34rpx;
					height: 34rpx;
				}

				.img2 {
					width: 32rpx;
					height: 37rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					margin-left: 16rpx;
				}
			}

			.select-right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333ad;

				image {
					width: 12rpx;
					height: 21rpx;
				}

				text {
					margin-right: 16rpx;
				}
			}
		}

		.btn {
			height: 98rpx;
			background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
			border-radius: 49rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 98rpx;
			// margin-top: 164rpx;
			margin-top: 64rpx;
		}
	}

	.input-item {
		display: flex;
		align-items: center;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		padding: 0 30rpx;

		// 	.label {
		// 		font-size: 32rpx;
		// 		font-weight: bold;
		// 		color: $uni-login-title-color;
		// 		margin-right: 40rpx;
		// 	}

		// 	.input-dom {
		// 		flex: 1;
		// 		font-size: 28rpx;
		// 		color: $uni-login-title-color;
		// 	}

		.text {
			font-size: 30rpx;
			color: $uni-login-title-color;
		}
	}
</style>